/* 方式一 为组件定义样式 */
import './index.css';

function Pagination(props) {

    function clickHandler(e) {
        console.log('clickHandler', e, e.target.innerText);
    }

    function changePage(i) {
        console.log('changePage', i);
    }

    console.log(props);
    // let size = props.size ? props.size : 10;

    /*
    * Uncaught TypeError: Cannot assign to read only property 'size' of object
    * 在 react 里面，函数式组件的调用时候传递的数据，是只读，不能去更改。如果更改直接报错。
    * 错误写法：
    * props.size = props.size ? props.size : 10;
    * */

    let size = props.size ? props.size : 10;

    let {total, page} = props;

    /*1. 总共的页码 100 / 10*/

    let totalPage = Math.ceil(total / size);

    let pages = [];

    for (let i = 0; i < totalPage; i++) {
        pages.push(<li key={i}><a href="javascript:;" onClick={ () => {
            changePage(i)
        }}>{i}</a></li>)
    }
    var styles = {color: '#f00', 'fontSize': '30px'};

    return (
        <>
            {/*样式里面如果使用的中线的属性，则必须转换为 小驼峰的写法 font-size--->fontSize*/}
            <h1 style={{color: '#f00', 'fontSize': '30px'}}>我是分页组件</h1>
            <h1 style={styles}>我是分页组件</h1>
            <p>1. 结构 jsx语法 2.样式(1. 写外部样式表 2. 写行内样式) 3. 行为 4. 状态 state 5. 生命周期函数</p>
            <hr/>
            <hr/>
            <p>1. react 里面的事件的绑定都要使用行内的方式进行绑定。绑定的时候，事件名的写法：
                on+事件类型的首字母大写；例如点击事件
                onClick
                onChange
                ....
            </p>
            <p>
                2. 需要为其传递一个事件的回调函数，需要事先定义好。传递函数名称即可。并且该函数的参数就是我们的 event事件源对象
            </p>
            <button onClick={clickHandler}>点击</button>
            <ul className="pagination">
                {pages}
            </ul>
        </>
    )

}

export default Pagination;
